<template>
  <div id="shareBox">
    <div class="shareBox">
      <div class="share_top">
        <div class="box">
          <img src="@/assets/img/wx.png" alt @click="shareOpen('session')" />
          <p>微信</p>
        </div>
        <div class="box">
          <img src="@/assets/img/wxpyq.png" alt @click="shareOpen('timeline')" />
          <p>朋友圈</p>
        </div>
        <div class="box">
          <img src="@/assets/img/iphone.png" alt @click="shareOpen('save')" />
          <p>保存</p>
        </div>
      </div>
      <div class="close_btn" @click="close">
        <span>取 消</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgUrl: ''
    }
  },
  props: {
    shareURL: {
      type: String
    },
    value: {
      type: Boolean
    }
  },
  created () {
    console.log(this.shareURL)
    this.saveImg(this.shareURL)
  },
  computed: {
    isShare: {
      get: function () {
        return this.value
      },
      set: function (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    // 截取页面图片
    saveImg (dataURL) {
      var _this = this
      var trans = api.require('trans')
      let imgPath = 'fs://img/'
      let imgName = 'WechatShare.png'
      let base64IMG = dataURL.split('base64,')[1]
      trans.saveImage(
        {
          base64Str: base64IMG,
          // album: true,
          imgPath: imgPath,
          imgName: imgName
        },
        function (ret, err) {
          if (ret.status) {
            _this.imgUrl = imgPath + imgName
          } else if (err) {
            _this.$toast('截图失败')
          }
        }
      )
    },
    shareOpen (type) {
      let self = this
      if (!this.$route.query.dev) {
        if (type === 'session' || type === 'timeline') {
          var wx = api.require('wxPlus')
          wx.shareImage(
            {
              apiKey: 'wx0ace701130407de4',
              scene: type,
              contentUrl: self.imgUrl
            },
            function (ret, _err) {
              if (ret.status) {
                // _this.$emit('success');
                self.$toast('分享成功')
                self.close()
                // _this.cancel()
              }
            }
          )
        } else {
          api.saveMediaToAlbum(
            {
              path: self.imgUrl
            },
            function (ret, err) {
              if (ret && ret.status) {
                self.$toast('保存成功')
              } else {
                self.$toast('保存失败')
              }
            }
          )
        }
      }
    },
    close () {
      this.isShare = false
    }
  }
}
</script>
<style scoped>
.shareBox {
  width: 100%;
  height: 2.8rem;
  background-color: #fff;
  position: absolute;
  bottom: 0;
}
.share_top {
  width: 100%;
  height: 1.6rem;
  padding: 0.3rem 0.4rem 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-content: center;
}
.box {
  float: left;
  width: 2.2rem;
  text-align: center;
}
.box img {
  width: 0.7rem;
  height: 0.7rem;
}
.close_btn {
  margin-top: 0.4rem;
  background: #fafafa;
  width: 100%;
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.32rem;
  color: #333333;
}
</style>